<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
    <title>Sliqvers音阁 · 在线音乐</title>
    <link rel="shortcut icon" href="#" />
    
    <!-- 引入Bootstrap资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.1.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
    <style>
        body {
            background-image: url("images/动漫女.png");
            background-size: cover;
            background-attachment: fixed;
            padding-top: 20px;
        }
        
        .container {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 20px;
        }
        
        table {
            margin-top: 20px;
        }
        
        audio {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3 class="text-center">我喜欢的音乐列表</h3>
        
        <div class="row">
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">歌曲名</label>
                        <input name="name" type="text" class="form-control" id="exampleInputName2">
                    </div>
                    <button id="submit1" type="button" class="btn btn-primary">查询</button>
                </form>
            </div>
            <div class="col-md-6 text-right">
                <a class="btn btn-primary" href="list.html">回到首页</a>
            </div>
        </div>
        
        <table class="table table-bordered table-hover">
            <thead>
                <tr class="success">
                    <th>歌名</th>
                    <th>歌手</th>
                    <th>歌曲</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="info" valign="middle"></tbody>
        </table>
    </div>
    
    <script>
        // 页面加载完成后执行
        $(function() {
            load();
            
            // 绑定查询按钮点击事件
            $("#submit1").click(function() {
                var name = $("#exampleInputName2").val();
                load(name);
            });
        });
        
        // 加载音乐列表函数，可以传歌名参数，也可以不传
        function load(musicName) {
            $.ajax({
                url: "/lovemusic/findlovemusic",
                data: { "musicName": musicName },
                type: "GET",
                dataType: "json",
                success: function(obj) {
                    console.log(obj);
                    var data = obj.data || []; // 确保data是数组
                    var html = '';
                    
                    if (data.length === 0) {
                        html = '<tr><td colspan="4" class="text-center">没有找到匹配的音乐</td></tr>';
                    } else {
                        // 动态生成音乐列表
                        for (var i = 0; i < data.length; i++) {
                            var musicUrl = data[i].url + ".mp3";
                            html += '<tr>';
                            html += '<td>' + data[i].title + '</td>';
                            html += '<td>' + data[i].singer + '</td>';
                            html += '<td><audio src="' + musicUrl + '" controls="controls" preload="none">播放歌曲</audio></td>';
                            html += '<td><button class="btn btn-danger" onclick="deleteInfo(' + data[i].id + ')">删除</button></td>';
                            html += '</tr>';
                        }
                    }
                    
                    $("#info").html(html);
                },
                error: function() {
                    $("#info").html('<tr><td colspan="4" class="text-center">加载音乐列表失败</td></tr>');
                }
            });
        }
        
        // 删除音乐函数
        function deleteInfo(id) {
            if (confirm("确定要移除这首音乐吗？")) {
                $.ajax({
                    url: "/lovemusic/deletelovemusic",
                    type: "POST",
                    data: { "id": id },
                    dataType: "json",
                    success: function(val) {
                        console.log(val);
                        if (val.data === true) {
                            alert("删除成功！");
                            load(); // 重新加载列表
                        } else {
                            alert("删除失败！");
                        }
                    },
                    error: function() {
                        alert("服务器错误，请稍后再试！");
                    }
                });
            }
        }
    </script>
</body>
<div style="width: 180px; height: 140px; position:absolute; bottom:10px; right:10px">
    <script type="text/javascript" src="player/sewise.player.min.js"></script>
    <script type="text/javascript">
			SewisePlayer.setup({
				server: "vod",
				type: "mp3",
                //这里是默认的一个网址
				videourl:"http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
		        skin: "vodWhite",
                //这里需要设置false
                autostart:"false",
			});
	</script>
</div>
</html>